<!doctype html>
<html lang="en" dir="ltr" xmlns:th="http://www.thymeleaf.org">
<head th:replace="public/head :: head(添加专栏)"></head>
<body class="">
<div class="page">
    <div class="flex-fill">
        <div th:replace="public/menu :: menu(2)"></div>
        <div class="my-3 my-md-5">
            <div class="container">
                <div class="row">
                    <div class="col-md-3">
                        <h3 class="mb-4"><p class="lh-1">专栏</p></h3>
                        <div>
                            <div class="list-group list-group-transparent mb-0">
                                <a href="#" class="list-group-item list-group-item-action d-flex align-items-center" th:href="@{/admin/column/list}">
                                    <span class="icon mr-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path></svg>
                                    </span>所有专栏
                                </a>
                                <a href="#" class="list-group-item list-group-item-action d-flex align-items-center active" th:href="@{/admin/column}">
                                    <span class="icon mr-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
                                    </span>新增专栏
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-9">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">新增专栏</h3>
                                <div class="alert alert-success col-login float-right" style="position:absolute;zIndex:-1;right: 50px;display: none" role="alert"  id="alert-success">
                                    新增成功
                                    <a href="#" class="close" data-dismiss="alert" aria-label="close"></a>
                                </div>
                                <div class="alert alert-error col-login float-right" style="position:absolute;zIndex:-1;right: 50px;display: none" role="alert"  id="alert-fail">
                                    新增失败，请稍后重试
                                    <a href="#" class="close" data-dismiss="alert" aria-label="close"></a>
                                </div>
                            </div>
                            <div class="card-body">
                                <form id="addForm">
                                    <div class="mb-3  col-md-9">
                                        <label class="form-label">专栏名</label>
                                        <input type="text" class="form-control" id="name" placeholder="请输入专栏名">
                                    </div>
                                    <div class="mb-3  col-md-9">
                                        <label class="form-label">简介 <span class="form-label-description" id="inputNum">0/120</span></label>
                                        <textarea class="form-control" id="summary" rows="6" placeholder="请输入简介..." onblur="countNum()" maxlength="120"></textarea>
                                    </div>
                                    <div class="mb-3  col-md-9">
                                        <label class="form-label">封面</label>
                                        <img src="/static/demo/photos/9f36332564ca271d.jpg" class="card-img" style="height: 200px; width: auto" id="images" onclick="javascript:$('#columnImages').click()">
                                        <input id="columnImages" type="file" style="display: none;" accept="image/jpeg" onchange="preImg(this.id, 'images')"/>
                                        <input type="hidden" name="image" id="image"/>
                                    </div>
                                    <div>
                                        <a href="#" class="btn btn-primary" style="top:100%" onclick="addColumn()">保存专栏</a>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div th:replace="admin/dashboard :: footer"></div>
</div>
<script>
    function getFileUrl(sourceId) {
        var url;
        if (navigator.userAgent.indexOf("MSIE")>=1) { // IE
            url = document.getElementById(sourceId).value;
        } else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox
            url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
        } else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome
            url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
        }
        return url;
    }
    function preImg(sourceId, targetId) {
        var url = getFileUrl(sourceId);
        var imgPre = document.getElementById(targetId);
        imgPre.src = url;
        getPolicy(sourceId);
    }

    function getPolicy(sourceId) {
        $.ajax({
            type: "get",
            url: "/admin/file",
            success: function (data) {
                upload(data.data, sourceId);
            },
            error: function () {
                alert("读取文件失败");
            }
        })
    }
    function upload(param, sourceId) {
        let imgFile = document.getElementById(sourceId).files[0];
        let extName = imgFile.name.substring(imgFile.name.lastIndexOf("."));
        let filePath = param.dir + random_string(8) + extName;
        var request = new FormData();
        request.append('ossaccessKeyId', param.accessid);
        request.append('policy', param.policy);
        request.append('signature', param.signature);
        request.append('key', filePath);
        request.append('dir', param.dir);
        request.append('host', param.host);
        request.append('file', imgFile);
        request.append('submit', "Upload to OSS");
        $.ajax({
            url: param.host,
            data: request,
            processData: false,
            cache: false,
            async: false,
            contentType: false,
            //关键是要设置contentType 为false，不然发出的请求头 没有boundary
            //该参数是让jQuery去判断contentType
            type: "POST",
            success: function (data, textStatus, request) {
                if (textStatus === "nocontent") {
                    let url = param.host + '/' + filePath;
                    $("#image").val(url);
                } else {
                    alert(textStatus);
                }
            }
        });
    }
    function random_string(len) {
        len = len || 32;
        var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
        var maxPos = chars.length;
        var pwd = '';
        for (i = 0; i < len; i++) {
            pwd += chars.charAt(Math.floor(Math.random() * maxPos));
        }
        return pwd;
    }
    function countNum() {
        let length = $("#summary").val().length;
        $("#inputNum").text(length + "/120");
    }
    function addColumn() {
        $.ajax({
            type: "post",
            url: "/admin/column",
            data: {
                "name": $("#name").val(),
                "summary": $("#summary").val(),
                "image": $("#image").val()
            },
            success: function (data) {
                if (data.code == 200) {
                    $("#alert-success").fadeIn();
                    setTimeout(function() {
                        $("#alert-success").fadeOut();
                        window.location.href = "/admin/column/list";
                    }, 1000);
                } else {
                    $("#alert-fail").fadeIn();
                    setTimeout(function () {
                        $("#alert-fail").fadeOut();
                    }, 800);
                }
            },
            error: function (data) {
                $("#alert-fail").fadeIn();
            }
        })
    }
</script>
</body>
</html>